<template>
    <a class="product-wrapper">
      <div class="img">
        <img v-lazy="imgUrl" alt="Shop Meet50off">
        <div :class="[isAffiliate ?'a-spacing-small showVisibility':'a-spacing-small hideVisibility']">
                <span class="a-badge-label">
                  <span class="a-badge-label-inner a-text-ellipsis">
                    <span class="a-badge-text">Best Seller</span>
                  </span>
                </span>
        </div>
      </div>
      <div class="content">
        <div class="title">
          <h2 :title="headLine">{{head}}</h2>
        </div>
        <div class="bottom">
          <div class="seller-and-categories">
            <div class="seller">{{ soldCount }} bought</div>
            <!--<div class="categories"><span>{{ category }}</span></div>-->
          </div>
          <div class="price-row">
            <ul class="star-box"  v-show="comment">
              <li class="star-item" v-for="item in 5" :class="item >star  && item < (star + 1) ? 'li-half' : ''">
                <template v-if="item >star  && item < (star + 1)">
                  <i class="material-icons yellow">star</i>
                  <i class="material-icons gray">star</i>
                </template>
                <template v-else>
                  <i class="material-icons" :class="item <= star?'yellow':'gray'">star</i>
                </template>
              </li>
              <li class="comment">({{comment}})</li>
            </ul>
            <p class="price"><span>${{ originalPrice }}</span><span class="red">${{ price }}</span></p>
          </div>
          <div class="discount-price">
            <span class="discount-badge red">{{ discountRate }}% OFF</span>
          </div>
        </div>
      </div>
    </a>
</template>

<script type="text/ecmascript-6">
    export default {
      props: {
        data: {
          type: Object,
          default: function() {
            return {}
          }
        },
        category: {
          type: String,
          default:''
        }
      },
      data() {
        return {
          imgUrl: '/images/amazon/product/B07B9STF9B-MAIN.jpg',
          headLine: 'Baberdicy Resistance Bands Set Exercise Bands, Set of 5, 12-inch Workout Bands for Home Fitness, Stretching, Physical Therapy and More',
          sellerName: 'paterJOY',
          soldCount: 0,
          categories: 'Home, Garden & Tools',
          originalPrice: '24',
          price: '12',
          discountRate: '0.5',
          isAffiliate: false,
          star: 0,
          comment: 0
        }
      },
      computed: {
        head() {
          return this._strFormat(this.headLine, 60)
        },
        // classB() {
        //   if (this.promotionType === 'Cashback') {
        //     return ''
        //   } else if (this.promotionType === 'Affiliate') {
        //     return 'green'
        //   } else if (this.promotionType === 'Selling') {
        //     return 'blue'
        //   }
        // }
      },
      created() {
        this.imgUrl = imgUrl + this.data.image.src + '?x-oss-process=image/resize,h_210,limit_0'
        this.headLine = this.data.headLine
        this.star = this.data.starScope
        this.comment = this.data.reviewCount
//        this.comment = this.data.reviewCount
        this.categories = this.data.categories
        this.soldCount = this.data.soldCount
        this.isAffiliate = (this.data.promotionType !== 'Cashback')
        this.promotionType = this.data.promotionType
        this.originalPrice = this.data.originalPrice
        this.price = this.data.price
        this.discountRate = (this.data.discountRate * 100).toFixed(0)
      },
      methods: {
        _strFormat(str, len) {
          if (str.length && str.length > len) {
            return str.substring(0, len) + '...'
          }
          return str
        },
        _toFixed(str) {
          return str.toFixed(2)
        }
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
  .showVisibility
    display: none !important
  .hideVisibility
    display: inline-block !important
  .product-wrapper
    width: 100%
    cursor pointer
    .img
      position: relative
      text-align: center
      height: 205px
      img
        height: 100%
        transition: all .3s
        max-width: 100%;
      img:hover
        transform: scale(1.03)
      .a-spacing-small
        position absolute
        left 0
        top   0
        text-decoration: none;
        display inline-block
        opacity: .9;
        .a-badge-label
          max-width: 140px;
          padding: 0 0.5rem 0 0.9rem;
          position: relative;
          height: 2.4rem;
          z-index: 1;
          float: left;
          background-color: #ff9600 !important;
          color: #ff9600 !important;
          .a-badge-label-inner
            font-size: 12px;
            color: #fff;
            line-height: 2.4rem;
            height: 2.4rem;
            .a-badge-text
              font-size 14px
        .a-badge-label:after
          content: "";
          width: 1rem;
          height: 2.4rem;
          border-right: 1rem solid transparent;
          border-top: 2.4rem solid;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          position: absolute;
          top: 0;
          right: -1rem;
    .content
      width: 100%
      border-bottom: 1px solid #e6e7e8
      padding-bottom: 16px
      .title
        h2
          font-size: 14px
          height: 40px
          max-height: 40px
          line-height: 20px
          margin-top: 8px
          margin-bottom: 8px
          overflow: hidden
          color: #333333
          font-weight bold
      .bottom
        .seller-and-categories
          flex: 2.5
          color: #98999a
          font-size: 13px
          padding-top: 8px;
          .seller
            height: 15px
          .categories
            height: 18px
            line-height: 18px
          .comment
             font-size 11px
             color: #a1a0a0
             margin-left 3px
             line-height 16px
        .price-row
          position relative
          display: flex
          text-align: right
          .red
            color: #fb333e
          .green
            color: #18823a
          .blue
            color: #4998e2
          .price
            font-size: 18px
            flex: 1
            > span:nth-child(1)
              font-size 14px
              text-decoration: line-through
              color: #98999a
            > span:nth-child(2)
              color: #18823a
              padding-left: 5px
              font-weight bold
        .discount-price
          margin-top: 0
          text-align: right
          > span
            border: 1px solid
            padding: 2px 7px
            font-size 12px
            border-radius: 3px;
  .star-box
    padding-top: 6px
    display flex
    li:nth-child(6)
      padding-left: 5px
      font-size: 12px
    .star-item
      width 13px
      height 13px
    .star-item i
      font-size 16px
  .li-half
    position: relative
    .yellow
      width: 8px
      overflow: hidden
      position: absolute
      left: 0
  .yellow
    color: #fec038
  .gray
    color: #a1a0a0
</style>
